<template>
  <div class="page-container">
    <div class="page-header">
      <h1>使用条款</h1>
      <p class="subtitle">最后更新：2024年6月15日</p>
    </div>

    <div class="content-section">
      <div class="terms-card">
        <h2>1. 接受条款</h2>
        <p>欢迎使用员工管理系统（"系统"）。通过访问或使用本系统，您同意遵守这些使用条款（"条款"）。如果您不同意这些条款的任何部分，请不要使用本系统。</p>
      </div>

      <div class="terms-card">
        <h2>2. 用户账户</h2>
        <p>使用本系统的某些功能可能需要创建用户账户。您同意：</p>
        <ul>
          <li>提供准确、完整和最新的注册信息</li>
          <li>妥善保管您的账户密码，并对您账户下的所有活动负责</li>
          <li>在发现任何未授权使用您账户的情况时立即通知管理员</li>
          <li>不与他人共享您的账户凭证</li>
        </ul>
        <p>管理员有权限制、暂停或终止任何违反这些条款的用户账户。</p>
      </div>

      <div class="terms-card">
        <h2>3. 知识产权</h2>
        <p>本系统及其原始内容、功能和设计均为公司或其内容提供商的财产，受国际版权、商标、专利、商业秘密和其他知识产权法律的保护。</p>
        <p>未经明确许可，您不得：</p>
        <ul>
          <li>复制、修改或创建本系统的衍生作品</li>
          <li>反编译、反向工程或尝试提取本系统的源代码</li>
          <li>移除任何版权、商标或其他所有权声明</li>
          <li>未经授权使用系统的商标或徽标</li>
        </ul>
      </div>

      <div class="terms-card">
        <h2>4. 用户行为</h2>
        <p>您同意不会：</p>
        <ul>
          <li>使用系统进行任何非法活动</li>
          <li>上传或分享任何侵犯他人权利的内容</li>
          <li>干扰系统的正常运行或安全性</li>
          <li>尝试未授权访问系统的任何部分</li>
          <li>使用自动化程序或机器人访问系统</li>
          <li>使用系统传播恶意软件或有害代码</li>
        </ul>
      </div>

      <div class="terms-card">
        <h2>5. 数据使用</h2>
        <p>您了解并同意：</p>
        <ul>
          <li>公司可能会收集和处理与您使用系统相关的数据</li>
          <li>您在系统中输入的员工信息将按照我们的隐私政策进行处理</li>
          <li>您负责确保您有权上传和处理您提交到系统的任何个人数据</li>
        </ul>
        <p>有关我们如何收集、使用和保护数据的更多信息，请参阅我们的隐私政策。</p>
      </div>

      <div class="terms-card">
        <h2>6. 服务变更</h2>
        <p>公司保留在任何时候修改、暂停或终止系统或其任何部分的权利，恕不另行通知。我们不对因系统修改、暂停或终止而导致的任何损失负责。</p>
      </div>

      <div class="terms-card">
        <h2>7. 免责声明</h2>
        <p>本系统按"现状"和"可用性"提供，不提供任何明示或暗示的保证。公司不保证系统将无错误、安全或不中断。</p>
        <p>您使用本系统的风险由您自行承担。在法律允许的最大范围内，公司及其供应商和许可方不承担任何因使用或无法使用系统而产生的直接、间接、附带、特殊、衍生或惩罚性损害赔偿责任。</p>
      </div>

      <div class="terms-card">
        <h2>8. 管辖法律</h2>
        <p>这些条款受中华人民共和国法律管辖，不考虑其冲突法规定。</p>
        <p>任何与系统使用相关的争议应提交给有管辖权的法院解决。</p>
      </div>

      <div class="terms-card">
        <h2>9. 条款修改</h2>
        <p>公司可能会不时修改这些使用条款。修改后的条款将在本页面发布，并在发布后立即生效。</p>
        <p>在任何修改后继续使用系统将被视为接受修改后的条款。我们建议您定期查看这些条款以了解任何变更。</p>
      </div>

      <div class="terms-card">
        <h2>10. 联系我们</h2>
        <p>如果您对这些使用条款有任何疑问，请联系：</p>
        <ul class="contact-info">
          <li>法务部门：李军</li>
          <li>电子邮件：legal@employeesystem.com</li>
          <li>电话：400-123-4567</li>
          <li>地址：上海市浦东新区张江高科技园区科苑路88号</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 14px;
  color: var(--app-secondary-text);
  margin-top: 0;
}

.content-section {
  display: grid;
  gap: 24px;
}

.terms-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--app-card-shadow);
}

.terms-card h2 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--el-color-primary);
}

.terms-card p, .terms-card ul {
  margin-top: 0;
  line-height: 1.6;
  color: var(--app-text-color);
}

.terms-card ul {
  padding-left: 20px;
}

.terms-card li {
  margin-bottom: 8px;
}

.contact-info {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 8px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-container {
    padding: 0 16px;
  }
  
  .terms-card {
    padding: 16px;
  }
}
</style> 